<template>
    <div>
        <img src="../assets/logo.jpg" alt="" class="logo">
        <div class="con">
            <div class="info">
                <div class="fl">
                    <p>请输入店铺编号:</p>

                </div>
                <input type="text" class="fr">
            </div>
            <div class="info">
                <div class="fl">
                    <p>请输入手机号:</p>
                </div>
                <input type="number" class="fr">
            </div>
            <div class="info">
                <div class="fl">
                    <p>请选择付款类型:</p>
                </div>
                <div class="fr">
                    <input type="radio" name="type" style="margin-bottom:0px;vertical-align: text-bottom">加盟费
                    <input type="radio" name="type" style="margin-bottom:0px;vertical-align: text-bottom;margin-left:10px">贷款
                </div>

            </div>
            <div class="info">
                <div class="fl">
                    <p>请输入付款金额:</p>
                </div>
                <input type="number" class="fr">
            </div>

            <div class="btn" @click="ok()">
                <button>下一步</button>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name: "index",
    data() {
        return {
            msg: "Welcome to Your Vue.js App"
        };
    },
    methods:{

        ok(){
           this.$router.push({ name: "qrcode"})
        }

    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.logo {
    width: 39px;
    height: 52px;
    margin: 10px;
}
.con {
    margin: 100px auto;
    width: 320px;
}
.info {
    height: 30px;
    font-size: 16px;
    vertical-align: bottom;
    margin-top: 10px;
    position: relative;
}
.info p {
    position: absolute;
    bottom: 0px;
    padding: 0px;
    margin: 0px;
}
.info input {
    height: 30px;
    font-size: 16px;    
    color: #666;
    outline: none;
    border-left-width: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-bottom-color: #000;
}
.fl {
    width: 120px;
    float: left;
}
.fr {
    width: 200px;
    float: right;
}
.btn {
    width: 100px;
    height: 30px;
    border: 1px solid #ccc;
    margin: 50px auto;
    line-height: 30px;
    text-align: center;
    border-radius: 5px;
}
.btn button {
    border: none;
    background: #fff;
    outline: none;
}
</style>
